<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>

            /*集体声明，只要符合当中任意一个即可生效*/
            li,.myh2,#myp{
                background:red;
            }

            /*后代选择器:空格表示后代*/
            div span{
                background:yellow;
            }

            /*子元素选择器：>父子关系*/
            div > p{
                background:pink;
            }

            /*同级别的元素，紧邻在div后面的同级别的p元素*/
            div + p{
                background:darkcyan;
            }
            /*同级别的元素，在div的后面与div是同级别的h4元素*/
            div ~ h4{
                background:yellowgreen;
            }

        </style>
    </head>
    <body>
        <h4>h4</h4>
        <div>

            <p>
                p1
                <span>ss</span>
            </p>
            <h4>h4</h4>
            <p>
                p2
            </p>
            <span>ssss</span>
        </div>
        <div>d1</div>
        <div>d2</div>
        <p>p01</p>
        <p id="myp">p02</p>
        <p>p03</p>
        <p>p04</p>
        <h2>h2</h2>
        <h2 class="myh2">h2</h2>
        <h2>h2</h2>
        <h2>h2</h2>
        <h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4>
        <li>li</li>
        <li>li</li>
        <div>div</div>
        <li>li</li>
        <p>p</p>
        <p>p</p>
        <h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4><h4>h4</h4>
    </body>
</html>